<template>
  <div>
    <el-page-header @back="$router.go(-1)" content="订单详情">
    </el-page-header>
    <div class="info">
      <div v-if="orderData.status === 1 || orderData.status === 2 || orderData.status ===3">
        <el-divider><h4>物流信息</h4></el-divider>
        <div v-if="logisticsData.length === 0">
          <el-empty description="包裹等待揽收投递"></el-empty>
        </div>
        <div v-else>
          <el-timeline :reverse="reverse">
            <el-timeline-item
                v-for="(activity, index) in logisticsData"
                :key="index"
                color="#0bbd87"
                :timestamp="activity.timestamp | dateFilter">
              <div class="show-content">
                {{activity.content}}
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <el-divider><h4>订单详情</h4></el-divider>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>订单号：<el-text>{{orderData.orderId}}</el-text></h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>创建日期：<el-text>{{orderData.createDate | dateFilter}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>寄件人姓名：<el-text>{{orderData.posName}}</el-text></h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>收件人姓名：<el-text>{{orderData.porName}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>寄件人所在地区：<el-text>{{orderData.posArea}}</el-text></h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>收件人所在地区：<el-text>{{orderData.porArea}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>寄件人详细地址：<el-text>{{orderData.posAddress}}</el-text></h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>收件人详细地址：<el-text>{{orderData.porAddress}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>寄件人联系方式：<el-text>{{orderData.posPhone}}</el-text></h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>收件人联系方式：<el-text>{{orderData.porPhone}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <h4>包裹规格：
              <el-text v-if="orderData.size===1">小件</el-text>
              <el-text v-if="orderData.size===2">中件</el-text>
              <el-text v-if="orderData.size===3">大件</el-text>
              <el-text v-if="orderData.size===4">超大件</el-text>
            </h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <h4>包裹状态：
              <el-text v-if="orderData.status===0">待处理</el-text>
              <el-text v-if="orderData.status===1">待揽收</el-text>
              <el-text v-if="orderData.status===2">待收货</el-text>
              <el-text v-if="orderData.status===3">已签收</el-text>
              <el-text v-if="orderData.status===4">已取消</el-text>
              <el-text v-if="orderData.status===5">已退回</el-text>
            </h4>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <h4>备注信息：<el-text>{{orderData.describes}}</el-text></h4>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getOrderInfo} from "@/api/mew";

export default {
  name: "OrderDetail",
  data() {
    return{
      orderId: '',
      orderData: {},
      logisticsData:[],
      reverse: true
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail(){
      getOrderInfo(this.orderId).then(res =>{
        this.orderData = res.data.data
        res.data.data.logisticsInfos.forEach(logisticsItem =>{
          this.logisticsData.push({ timestamp: logisticsItem.departTime,
          content: '\n快递已到达：' + logisticsItem.thisSite
          + '\n下一站：' + logisticsItem.targetSite
              + '\n您的包裹由快递员'
              + logisticsItem.courier.name + '护送，请拨打号码：'
              + logisticsItem.courier.phone + '    了解更多详细信息！' })
        })
        if (res.data.data.logisticsInfos.length !== 0){
          let temp = res.data.data.logisticsInfos[res.data.data.logisticsInfos.length -1]
          if (temp.destination === 1 && temp.arriveTime != null){
            this.logisticsData.push({ timestamp: temp.arriveTime,
            content: '\n快递已到达终点站：' + temp.targetSite})
          }
        }

      })
    }
  }
}
</script>

<style scoped>
.show-content{
  white-space: pre-wrap;
}
</style>